<template>
    <n-tooltip placement="bottom" trigger="hover">
        <template #trigger>
            <n-button text style="font-size: 24px; padding: 0 8px;" :disabled="undo?false:true">
                <n-icon>
                    <i class="icon iconchexiao" @click.self="handleRedo(1)"></i>
                </n-icon>
            </n-button>
        </template>
        <span>撤销&nbsp;ctrl+z</span>
    </n-tooltip>
    <n-tooltip placement="bottom" trigger="hover">
        <template #trigger>
            <n-button text style="font-size: 24px;padding: 0 8px;" :disabled="redo?false:true">
                <n-icon>
                    <i class="icon iconzhongzuo" @click.self="handleRedo(0)"></i>
                </n-icon>
            </n-button>
        </template>
        <span>重做&nbsp;ctrl+shift+z</span>
    </n-tooltip>
    <n-tooltip placement="bottom" trigger="hover">
        <template #trigger>
            <n-button text style="font-size: 24px;padding: 0 8px;">
                <n-icon>
                    <i class="icon iconyidongbiaoge" @click.self="handleRedo(2)"></i>
                </n-icon>
            </n-button>
        </template>
        <span>移动</span>
    </n-tooltip>
</template>

<script setup name="UnReDo">
import useSharedCore from '@/hooks/shared';
const { coverEditor } = useSharedCore();

const undo = ref(0)
const redo = ref(0)


// type 1:撤销 0:重做
function handleRedo(type) {
    const canvas = coverEditor?.canvas
    if (type === 1) {
        undo.value && coverEditor.undo()
        // console.log('撤销');
    } else if (type === 0) {
        // console.log('还原');
        redo.value && coverEditor.redo()
    } else if (type === 2){
        if (canvas) {
            canvas.isDrawingMode = false
            canvas.setCursor('default')
        }
    }
}

const onhistoryUpdate = (canUndoParam, canRedoParam) => {
    undo.value = canUndoParam
    redo.value = canRedoParam
}

onMounted(() => {
    coverEditor.on('historyUpdate', onhistoryUpdate);
})
onBeforeUnmount(() => {
    coverEditor.off('historyUpdate', onhistoryUpdate);
})
</script>